import React, { Fragment } from 'react'
import logo from './logo.svg'
import './App.css'
/**
 * * html + js vue: template script style
 * react 使用jsx/tsx语法排版 （ui描述 + ui逻辑）
 *  |
 * html + css + js
 * 1. class  -> className
 * 2. 所有标签必须闭合，尤其是单标签 <img /> <br /> <hr/> <div></div> ...
 * 3. 注释 {  }
 * 4. 变量要使用 {} 包裹
 * 5. 事件：onClick 驼峰命名 onScroll onMouseMove onEnterPress...
 * 6. label  <label htmlFor="input">账号:</label> <input id="input" />
 * 7. 设置html
 * 8. 虚拟标签 vue: template react: Fragment <></>
 * 9. jsx语法中 的判断统一写 三目判断
 *
 * 事件this处理
 * 1. html 中，如果使用 this.handleClick 不加括号，外面绑定在原型上的函数，要使用箭头函数
 * 2. 如果this.handleClick需要传递参数，这个地方外面通过箭头函数包裹的话，外面函数可以不使用箭头函数
 * 3. 只是用一个箭头就可以，，如果传递参数的话，只能html中使用箭头函数
 * 4. 如果以上理解不了，可以全部使用箭头函数
 *
 * 介绍组件知识：
 * 类组件 class写组件 （构造函数：继承 extends关键字）
 *  extends + super 才能使用继承
 * 函数组件
 *
 */

const BoxStyle = {
  width: 100,
  height: 100,
  border: '1px solid red',
}

// 类组件 可以有状态 可以写数据 data: {} state
class App extends React.Component {
  constructor(props) {
    // 初始化执行一次
    super(props) // 执行超类，执行了一遍父组件
    // state => data
    // react 规定state数据是一个只读数据，如果要写（更改），需要调用setState方法更新数据
    this.state = {
      title: 'App, hello world',
      footer: '<footer class="footer">footer</footer>',
      list: [
        {
          cityName: '北京',
          children: [
            { name: '海淀区', pid: 1 },
            { name: '丰台区', pid: 1 },
            { name: '朝阳区', pid: 1 },
          ],
        },
        {
          cityName: '上海',
          children: [
            { name: '奉贤区', pid: 2 },
            { name: '浦东区', pid: 2 },
            { name: '普陀区', pid: 2 },
          ],
        },
      ],
      cityArr: [], // 放置切换的内容
      tabIndex: 0, // tab切换初始化下标
    }
    // this.handleClick = this.handleClick.bind(this)
  }

  // 提取函数
  // 绑定在原型上prototype
  handleClick() {
    console.log('onClick', this)
  }

  // 继承过来
  render() {
    console.log(this, 'this')
    return (
      <>
        <header className="App-header">
          {/* <Fragment>
            <label htmlFor="input">账号:</label> <input id="input" />
            <hr />
            <h1 dangerouslySetInnerHTML={{ __html: this.state.footer }}></h1>
            <hr />
          </Fragment>

          <h1 style={{ color: 'red' }}>{this.state.title}</h1>
          <div onClick={this.handleClick} style={BoxStyle}></div>
          <img src={logo} className="App-logo" alt="logo" /> */}
          {/* <p>
          Edit <code>src/App.js</code> and save to reload.
        </p> */}
        </header>
      </>
    )
  }
}

export default App
